<template>
  <div class="container">
    <div class="title">风机与照明</div>
    <div class="content-container">
      <div v-for="(item, index) in itemList" class="item-container" :class="{'mr-none': index%2}">
        <div class="item-name">{{item.name}}</div>
        <img :src="getSrc(item)" alt="" class="item-img">
        <div :class="{'item-btn':item.status!=='不存在', 'item-btn-none':item.status==='不存在'}">{{item.status}}</div>
      </div>
    </div>
  </div>
</template>

<script>

  import $ from 'jquery'
  import _ from 'lodash'
  import * as Constant from './common/Constant';

  let imgFan = require('../assets/fan.png')
  let imgFanNone = require('../assets/fan-none.png')
  let imgLight = require('../assets/light.png')
  let imgLightNone = require('../assets/light-none.png')

  export default {
        name: 'FanLight',
        data() {
            return {
              itemList: []
            }
        },
        computed: {},
        methods: {
          getSrc(item){
            if(item.type==='fan'){
              return item.status==='开启中'?imgFan:imgFanNone;
            }else if(item.type==='light'){
              return item.status === '开启中'?imgLight:imgLightNone;
            }

            return null;
          },
          getData(){
            if(Constant.LOCAL){
              this.itemList = [
                {
                  name: '一区分机',
                  status: "开启中",
                  type: 'fan'
                },
                {
                  name: '一区照明',
                  status: "开启中",
                  type: 'light'
                },
                {
                  name: '二区分机',
                  status: "已关闭",
                  type: 'fan'
                },
                {
                  name: '二区照明',
                  status: "已关闭",
                  type: 'light'
                },
                {
                  name: '三区分机',
                  status: "不存在",
                  type: 'fan'
                },
                {
                  name: '三区照明',
                  status: "不存在",
                  type: 'light'
                },
              ];
            }

            setTimeout(this.getData, Constant.INTERVAL*1000);
          }
        },
        mounted() {
        },
        created() {
          this.getData();
        }
    }
</script>

<style lang="stylus" scoped>
  .content-container
    margin-top: 20px;
    display flex
    flex-direction row
    justify-content center
    align-items center
    flex-wrap wrap
    .item-container
      margin-bottom 15px
      margin-right 24px
      display flex
      flex-direction column
      justify-content center
      align-items center
      .item-name
        font-size: 12px;
        color: #FFFFFF;
      .item-img
        width: 30px;
        height: 30px;
        margin-top: 10px
        margin-bottom 10px
      .item-btn
        background-image: linear-gradient(-179deg, #1C76CE 0%, #033963 100%);
        border-radius: 6px;
        font-size: 12px;
        color: #51D1F9;
        text-align center
        padding: 4px 6px
      .item-btn-none
        text-align center
        opacity: 0.3;
        font-size: 12px;
        color: #FFFFFF;
    .mr-none
      margin-right 0
</style>
